<template>
  <div id="order" class="container">
    <h3 class="title">
      <span />
      标签生成器
    </h3>
    <el-tabs
      v-model="activeName"
      class="tabs"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="站点配置" name="first">
        <div class="content">
          <div class="left">
            <h4>基础配置</h4>
            <el-row :gutter="20">
              <el-col
                v-for="item in tagdata"
                :key="item.id"
                :span="6"
                class="col"
              >
                <a href="javascript:;">{{ item.title }}</a>
              </el-col>
            </el-row>
            <h4>其他</h4>
            <el-form>
              <el-form-item label="默认值">
                <el-input />
              </el-form-item>
              <el-form-item label="处理函数">
                <el-input />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small">生成模板标签</el-button>
                <el-button class="dele" size="small">
                  {{ $t('重置') }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="right">
            <h4>标签预览</h4>
            <div style="margin-top: 15px; margin-bottom: 20px">
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 6 }"
                style="margin-bottom: 15px"
              />
              <el-button class="dele" size="small">渲染标签结果</el-button>
              <el-button type="primary" size="small">复制标签</el-button>
            </div>
            <h4>执行结果</h4>
            <div style="margin-top: 15px">
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 6 }"
                style="margin-bottom: 15px"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="文章列表" name="second">
        <List v-if="activeName == 'second'" />
      </el-tab-pane>
      <el-tab-pane label="栏目列表" name="third">栏目列表</el-tab-pane>
      <el-tab-pane label="单页面列表" name="fourth">单页面列表</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import tagApi from '@/api/tag.js'
import List from './components/list.vue'
export default {
  components: { List },
  data() {
    return {
      activeName: 'first',
      tagdata: [
        { title: '平台会员', id: 1 },
        { title: '首页关键字', id: 2 },
        { title: '公众号二维码公众号二维码公众号二维码', id: 3 },
        { title: '会员个人主页', id: 4 },
        { title: '标志字典', id: 5 },
        { title: '搜索方式', id: 6 },
        { title: '栏目授权', id: 7 },
        { title: '支付模块', id: 8 }
      ]
    }
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    handleClick(val) {}
  }
}
</script>
<style lang="scss">
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item {
  background-color: #eee;
  border: none;
  margin-right: 5px;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #fff;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-radius: 0;
  border: none;
}
.tabs.el-tabs--card .el-tabs__header {
  margin: 0;
}
.tabs.el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}
</style>
<style scoped lang="scss">
.tabs {
  padding: 20px;
  .content {
    display: flex;
    justify-content: left;
    padding-top: 20px;
    padding-left: 15px;
    background-color: #fff;
    .left {
      width: 50%;
      margin-right: 20px;
    }
    .right {
      width: calc(50% - 40px);
    }
    h4 {
      font-weight: normal;
      padding-bottom: 10px;
      border-bottom: solid 1px #eee;
    }
  }
  .el-row {
    margin-top: 15px;
    min-height: 400px;
  }
  .col {
    max-width: 80%;
    margin-bottom: 5px;
    white-space: nowrap;
    a {
      font-size: 12px;
      color: #444;
      background-color: #f4f4f4;
      border: solid 1px #ddd;
      border-radius: 2px;
      padding: 7px 10px;
      display: inline-block;
      max-width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
